<template>
  <div>
    <!-- 查询 重置 -->
    <el-form :inline="true" :model="formInline" class="demo-form-inlformLabelWidthine">
      <el-form-item label="姓名">
        <el-input v-model="formInline.name" placeholder="请输入姓名查询"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="find">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="reset">重置</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="success" @click="addGraduate">新增</el-button>
      </el-form-item>
    </el-form>
    <!-- <el-table :data="tableData.slice((currentPage-1) * pageSize, currentPage * pageSize)" style="width: 100%"> -->
    <el-table :data="compData" border  size="mini">
      <i class="el-icon-edit"></i>
      <el-table-column prop="name" label="姓名" align="center" min-width="10%">
      </el-table-column>
      <el-table-column prop="years" label="毕业年份" align="center" min-width="10%">
      </el-table-column>
      <el-table-column prop="job" label="职业" align="center" min-width="10%">
      </el-table-column>
      <el-table-column prop="salary" label="薪资" align="center" min-width="10%">
      </el-table-column>
      <el-table-column prop="state_text" label="求职状态" align="center" min-width="10%">
      </el-table-column>
      <el-table-column prop="province" label="工作省份/直辖市/自治区" align="center" min-width="10%">
      </el-table-column>
      <el-table-column prop="city" label="工作城市" align="center" min-width="10%">
      </el-table-column>
      <el-table-column label="操作" align="center" min-width="12%">
        <!-- 每一行的数据 -->
        <template #default="scope">
            <el-button type="primary"  @click="edit(scope.row)" round>
              <Edit style="width: 1.2em; height: 1.2em; margin-right: 0" />
            </el-button>
            <el-popconfirm
              confirm-button-text="确定"
              cancel-button-text="取消"
              icon-color="#f90"
              title="确定删除该毕业生信息吗?"
              @confirm="del(scope.row)"
            >
              <template #reference>
                <el-button type="danger" round>
                  <Delete style="width: 1.2em; height: 1.2em; margin-right: 0px" />
                </el-button>
              </template>
            </el-popconfirm>
            
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination class="page"
      @size-change="handleSizeChange" 
      @current-change="handleCurrentChange" 
      :current-page=currentPage
      :page-sizes="[5, 10, 15]" 
      :page-size=pageSize 
      layout="total, sizes, prev, pager, next, jumper" 
      :total="total">
    </el-pagination>
    <!-- 新增信息操作 -->
    <el-dialog :title="state ? '添加毕业生信息':'修改毕业生信息'" v-model="dialogFormVisible">
      <el-form :model="form" :rules="rules" ref="form">
        <el-form-item label="id" :label-width="formLabelWidth" prop="id" v-if="false">
          <el-input v-model="form.id" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="姓名：" :label-width="formLabelWidth" prop="name">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="毕业年份："  :label-width="formLabelWidth" prop="year">
            <el-date-picker
              v-model="form.years"
              type="year"
              :format="years"
              placeholder="选择年份">
            </el-date-picker>
          <!-- <el-input v-model="form.year" autocomplete="off"></el-input> -->
        </el-form-item>
        <el-form-item label="职业：" :label-width="formLabelWidth" prop="job">
          <el-input v-model="form.job" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="薪资：" :label-width="formLabelWidth" prop="salary">
          <el-input v-model="form.salary" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="求职状态：" :label-width="formLabelWidth" prop="state">
          <el-select v-model="form.state" placeholder="请选择就业状态">
            <el-option label="已就业" value="0"></el-option>
            <el-option label="待就业" value="1"></el-option>
            <el-option label="未入学" value="2"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="工作省份/直辖市/自治区：" :label-width="formLabelWidth" prop="province">
          <el-input v-model="form.province" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="工作城市：" :label-width="formLabelWidth" prop="city">
          <el-input v-model="form.city" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div class="dialog-footer">
        <el-button @click="closeInfo('form')">取 消</el-button>
        <el-button type="primary" @click="sure(form)">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script >
import { graduate,graduateFind,graduateDel,graduateInfo,graduateEdit } from '@/api/api';
//import { ref,reactive} from '@vue';
export default {
  data() {
    return {
      tableData: [],
      input: '',
      currentPage: 1, //当前页数
      pageSize: 10, //每页显示条数
      total: 0, //实现的总条数
      formInline:{  //查询的name
        name:''
      },
      dialogFormVisible:false,
      form:{
        id:'',
        name:'',
        years:'',
        job:'',
        salary:'',
        state:'',
        province:'',
        city:''
      },
      //formLabelWidth:"0px",
      rules:{ //验证规则
        name:[{required : true , message : '请输入姓名' }],
        years:[{required : true , message : '请输入毕业年份' }],
        job:[{required : true , message : '请输入职业' }],
        salary:[{required : true , message : '请输入薪资' }],
        state_text:[{required : true , message : '请选择求职状态' }],
        province:[{required : true , message : '请输入工作省份/直辖市/自治区' }],
        city:[{required : true , message : '请输入工作城市' }]
      },
      state: true,
      //visible: false
    };
  },
  created() {
    this.getData()
    //this.find()
    // this.del()
  },
  computed:{
    compData(){
      return this.tableData.slice((this.currentPage-1) * this.pageSize, this.currentPage * this.pageSize)
    }
  },
  methods: {
    find(){
      console.log(this.formInline.name)
      if(this.formInline.name==''){
        this.getData(this.formInline)
      }else{
         graduateFind(this.formInline.name).then(res=>{
          console.log('查询',res.data)
          if(res.status === 200){
          this.tableData = res.data;
          this.tableData.forEach(item => {
            item.state==="1"?item.state_text='已工作':item.state==="2"?item.state_text='求职中':item.state_text='未工作'
        //  item.years=item.years.split('-',1)
            // item.state === "1" ?
            //   (item.state_text = '已就业') :
            //   item.state === "2" ?
            //     (item.state_text = '待就业') :
            //     (item.state_text = '休学中');
            console.log(item.years)
                item.years=item.years.split('-',1)
                
          })
          this.total = res.data.length;
          }
        })
      }
    },
    closeInfo(form) { //点击修改后又取消了再点击新增 就取消验证规则
      console.log(form)
      this.$refs['form'].resetFields()  //重置表单
      this.dialogFormVisible = false
    },
    reset(){  //重置可以理解为查所有
      this.formInline = {}, //将查询的列表清空
      this.getData(this.formInline) //进再行数据渲染
    },
    addGraduate(){
      this.state = true
      this.dialogFormVisible = true
      this.form = {
        name:'',
        years:'',
        job:'',
        salary:'',
        state:'',
        province:'',
        city:''
      }
    },
    sure(form){
      this.$refs['form'].validate(valid=>{  //validate:表单自带的校验
        if(valid){  //如果校验通过
          console.log(form)
          console.log('添加-form',this.form)
          if(this.state){ //如果state为真执行添加
            this.form.state === '已就业'?(this.form.state = 1):
            this.form.state === '待就业'?(this.form.state = 2):
            this.form.state = 3;
            // this.form.years = this.form.years.toString()
            // this.form.years = this.form.years.substring(10,15)
            // console.log('years',this.form.years)
            // this.form.year = this.form.year.split('-',1)
            // console.log('year',this.form.year)
            graduateInfo(this.form).then(res=>{
              console.log('添加-res',res)
              if(res.data.code === 0){
                this.getData(this.formInline) //刷新数据
                //this.$refs['form'].resetFields()  //重置表单
                this.dialogFormVisible = false; //关闭弹框
                this.$message({type:'success',message: res.data.message})
              }
            })
          }
          else{  //state为假执行修改
            this.form.state === '已就业'?(this.form.state = 1):
            this.form.state === '待就业'?(this.form.state = 2):
            this.form.state = 3;
            // this.form.years = this.form.years.toString()
            // this.form.years = this.form.years.substring(10,15)
            console.log('years',this.form.years)
            console.log(this.form.state)
            graduateEdit(this.form).then(res=>{
              console.log('修改',res,this.form)
              if(res.data.code === 0){
                this.getData() //刷新数据
                this.$refs['form'].resetFields()  //重置表单
                this.dialogFormVisible = false; //关闭弹框
                this.$message({type:'success',message: res.data.message})
              }
            })
          }
          
        }
      }) 
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.currentPage = 1
    },
    handleCurrentChange(val) {
      this.currentPage = val
    },
    getData(params) {
      graduate(params).then(res => {
        if (res.data.code === 0) {
          console.log('###')
          console.log(res)
          // console.log(res.data.data.result[0].years.substring(0,4))
          this.tableData = res.data.data;
          this.total = res.data.total;
          console.log(this.tableData)
          console.log('@@')
          console.log(this.total)
          console.log(res.data.data[1].years)
          // this.tableData[0].years = this.tableData[0].years.substring(0,4)
          //尽量不要修改源数据
          this.tableData.forEach(item => {
            item.state==="1"?item.state_text='已工作':item.state==="2"?item.state_text='求职中':item.state_text='未工作'
        //  item.years=item.years.split('-',1)
            // item.state === "1" ?
            //   (item.state_text = '已就业') :
            //   item.state === "2" ?
            //     (item.state_text = '待就业') :
            //     (item.state_text = '休学中');
            console.log(item.years)
                item.years=item.years.split('-',1)
                
          })
        }
        
        
        // console.log(res)
      })
    },
    /* find(name){
      this.getData(name)
    }, */
    del(row){
      console.log(row)
          graduateDel(row.id).then(res=>{
            console.log(res)
            if(res.status === 200){
              this.$message({ message:'删除成功',type:'success' })
              this.getData()
            }
          })
      
    },
    // delB(){
    //   visible = true
    // },
    edit(row){
      this.state = false
      this.dialogFormVisible = true //打开窗口
      this.form.id=row.id//把选中的这条数据渲染到表单
      this.form.name=row.name
      this.form.years=row.years[0]
      this.form.job=row.job
      this.form.salary=row.salary
      this.form.state=row.state
      this.form.province=row.province
      this.form.city=row.city
      // this.$nextTick(() => { //this.$nextTick():将回调延迟到下次dom更新循环之后再执行
      //  this.form = {...row}//获取本行数据（扩展一份，而不是直接数据联动）
      // }); 
    }
    
  }
}
</script>

<style lang="less">
.input {
  width: 200px;
  margin: 10px;
}
.page{
  margin-top: 20px;
  margin-bottom: -10px;
}
</style>